<template>
	<view class="certmain">
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed">
				<view class="action" @tap="$wanlshop.back(1)">
					<text class="wlIcon-fanhui1"></text>
				</view>
				<view class="content" :style="{top: $wanlshop.wanlsys().top + 'px'}">
					立即报名
				</view>
				<!-- <view class="action" @tap="showModal('share')">
				<text class="wlIcon wlIcon-fenxiang"></text>
			</view> -->
			</view>
		</view>

		<view class="container">
			<view class="header">
				<view class=""><text class="roundSort">1</text>
					<view class="">提交信息</view>
				</view>
				<view class="ellipisis">···</view>
				<view class=""><text class="roundSort">2</text>
					<view class="">培训</view>
				</view>
				<view class="ellipisis">···</view>
				<view class=""><text class="roundSort">3</text>
					<view class="">平台授权</view>
				</view>
				<view class="ellipisis">···</view>
				<view class=""><text class="roundSort">4</text>
					<view class="">完成</view>
				</view>
			</view>
		</view>
		<view class="Title">
			<image src="../../static/images/index/ellis.png" style="width: 250rpx;height: 2rpx;" mode=""></image>
			<text>登记信息</text>
			<image src="../../static/images/index/ellis.png" style="width: 250rpx;height: 2rpx;" mode=""></image>
		</view>
		<view class="">
			<input class="Input" type="text" placeholder="姓名" v-model="name" value="" />
			<input class="Input" type="text" placeholder="联系电话" v-model="mobile" value="" />
			<view class="submit" @click="submitForm()">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "",
				mobile: '',
				teaid: ""
			}
		},
		onLoad(options) {
			this.teaid = options.id
		},
	
		methods: {
			change(name, value) {
				this.formData.checked = value
				this.$refs.form.setValue(name, value)
			},

			submitForm() {

				if (!this.name) {

					uni.showToast({
						title: '请输入姓名',
						icon: 'none',
						duration: 2000
					});
					return false
				}

				if (!this.mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 2000
					});
					return false
				}
				this.$api.post({
					url: '/tea_member/submitMember',
					data: {
						tea_id: this.teaid,
						name: this.name,
						mobile: this.mobile
					},
					success: res => {
						console.log(res)
						uni.showToast({
							title: '报名成功！',
							icon: 'success',
							duration: 2000
						});
						setTimeout(() => {
							this.$wanlshop.back(1)
						}, 2000)
					}
				});

			},

			//重置表单 。原生的组件input组件不能重置表单
			resetForm() {
				this.$refs.form.resetFields()
			},
			validateField(form) {
				this.$refs[form]
					.validateField(['name', 'email'])
					.then(res => {
						uni.showToast({
							title: '验证成功'
						})
						console.log('表单的值：', res)
					})
					.catch(errors => {
						console.error('验证失败：', errors)
					})
			},

			clearValidate(form, name) {
				if (!name) name = []
				this.$refs[form].clearValidate(name)
			}
		}
	}
</script>

<style lang="scss">
	.certmain {

		min-height: 100vh;
		width: 100%;
		background-color: #FFFFFF;
		padding-bottom: 40rpx;

	}

	.cu-custom {
		line-height: 90rpx;
	}

	.container {
		padding: 30rpx;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		text-align: center;
		font-size: 26rpx;
	}

	.ellipisis {
		color: rgba(19, 135, 254, 1);

		font-size: 60rpx;
	}

	.roundSort {
		width: 30px;
		height: 30px;
		background: #E3F1FF;
		opacity: 1;
		border: 1px solid #1387FE;
		display: inline-block;
		line-height: 30px;
		border-radius: 50%;
		color: #1387FE;
	}

	.Title {
		justify-content: space-between;
		display: flex;
		align-items: center;
		font-size: 40rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #222222;
	}

	.Input {
		width: 400rpx;
		height: 50rpx;
		background: #FFFFFF;
		border-radius: 6rpx;
		opacity: 1;
		border: 1px solid #EEEEEE;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #777777;
		margin: 20rpx auto;
		padding-left: 10rpx;
	}

	.submit {
		width: 200px;
		height: 25px;
		background: #1387FE;
		border-radius: 3px 3px 3px 3px;
		opacity: 1;
		font-size: 13px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		margin: 20rpx auto;
		text-align: center;
		line-height: 50rpx;
	}
</style>
